<template>
  <el-dialog title="新增学科" :visible="showDialog" @close="closeDialog" close-on-click-modal width="400px">

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">

      <el-form-item label="学科姓名" prop="subjectName">
        <el-input v-model="ruleForm.subjectName" style="width:200px"></el-input>
      </el-form-item>
        <!-- 控制确定 取消按钮的位置 -->
        <el-form-item label="是否显示" class="xianshi" prop="isFrontDisplay">

          <el-switch v-model="ruleForm.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949" @click="isFrontDisplay">
          </el-switch>
        </el-form-item>
        <el-form-item class="queding">
          <el-button type="primary" @click="submitForm">取消</el-button>
          <el-button @click="resetForm">确定</el-button>

      </el-form-item>
      <!-- 开关 -->

    </el-form>

  </el-dialog>
</template>

<script>
import { add } from '../../../api/hmmm/subjects'
export default {
  data () {
    return {

      ruleForm: {
        subjectName: this.obj.subjectName || '',
        isFrontDisplay: this.obj.isFrontDisplay || 0

      },
      value: true,
      rules: {
        subjectName: [
          { required: true, message: '学科名不能为空', trigger: 'change' }

        ]
      }
    }
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    obj: {
      type: Object,
      default: false

    }

  },
  methods: {
    closeDialog () {
      this.$emit('closeDialog', false)
    },
    // 取消
    submitForm () {
      this.showDialog = false
      this.resetForm = {
        subjectName: '',
        isFrontDisplay: 0

      }
    },
    // 确定
    resetForm () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const res = await add(this.ruleForm)
          console.log(res)
          this.$message.success('恭喜您，添加成功')
          this.$emit('list')
          this.showDialog = false
        } else {

        }
      })
    },
    isFrontDisplay () {
      this.ruleForm.isFrontDisplay = !this.ruleForm.isFrontDisplay
    },
    getObj () {
      this.ruleForm = {
        subjectName: this.obj.subjectName,
        isFrontDisplay: this.obj.isFrontDisplay
      }
    }
  },
  created () {
    console.log(this.obj)
  }

}
</script>

<style scoped lang='scss'>
.xianshi {
  margin-left: 10px;
  margin-top: 10px;
}

.queding {
  margin-left: 200px;
  margin-top: 20px;
}
</style>
